import {useState,memo} from "react";
import {Button} from 'antd'

const Son1 = memo((props) => {
    return (
        <div>
            {console.log('son1 render')}
            son1:{props.son1Count}
        </div>
    )
},((prevProps, nextProps) => prevProps.nowTime===nextProps.nowTime))
const Son2 = memo((props) => {
    return (
        <div>
            {console.log('son2 render')}
            son2:{props.son2Count}
        </div>
    )
})
const Parent = () => {
  const [count,setCount] = useState(0)
  const [son1Count,setSon1Count] = useState(0)
  const [son2Count,setSon2Count] = useState(0)
  const [nowTime,setNowTime] = useState(new Date().toLocaleString())
  return (
      <div>
          {console.log("Parent render")}
          <Button onClick={() => setCount(v=>v+1)}>parent+1</Button>
          <Button onClick={() => setSon1Count(v=>v+1)}>son1+1</Button>
          <Button onClick={() => setSon2Count(v=>v+1)}>son2+1</Button>
          <Button onClick={() => setNowTime(new Date().toLocaleString())}>点击更新子组件</Button>
        <h3>Parent:{count}</h3>
          <Son1 nowTime={nowTime} son1Count={son1Count}></Son1>
          <Son2 son2Count={son2Count}></Son2>
      </div>
  )
}
export default Parent